var config = require('./config.json');

var extendSpacing = {};
var i = 2;
while (i<=300){
    if(i<30 || (i%2===0 && i<200) || i%5===0) extendSpacing[i+''] = (i/100)+'rem';
    if(i<10) extendSpacing[i+'px'] = i+'px';
    i += 1;
}

module.exports = {
    prefix: 'c-',
    //future: {},
    purge: [
        './'+config.buildPath+'/**/*.html',
        './'+config.buildPath+'/js/app.js',
    ],
    theme: {
        screens:{
            sm: '576px',
            md: '768px',
            lg: '992px',
            xl: '1200px',
            //"xxl": "1536px",
        },
        extend: {
            colors:{
                // primary:'#0D328D',
                // success:'#2DC0BD',
                // danger:'#E9331F',
            },
            fontSize:{
                'xs': '0.14rem',
                'sm': '0.16rem',
                'base': '0.18rem',
                'lg': '0.2rem',
                'xl': '0.24rem',
                '2xl': '0.28rem',
                '3xl': '0.3rem',
                '4xl': '0.4rem',
                '5xl': '0.6rem',
                '6xl': '0.8rem'
            },
            container: {
                center: true,
                padding: {
                    default: '15px'
                }
            },
            /*maxWidth:{
                'container-1730':'1730px'
            },*/
            spacing: extendSpacing,
            padding:extendSpacing,
            margin:extendSpacing,
        },
    },
    variants: {
        backgroundColor: ['responsive', 'hover', 'group-hover'],
        borderColor: ['responsive', 'hover', 'group-hover'],
        //borderRadius: ['responsive', 'hover', 'group-hover'],
        //borderWidth: ['responsive', 'hover', 'group-hover'],
        boxShadow: ['responsive', 'hover', 'group-hover'],
        display: ['responsive', 'hover', 'group-hover'],
        flex: ['responsive', 'hover', 'group-hover'],
        fontSize: ['responsive', 'hover', 'group-hover'],
        fontWeight: ['responsive', 'hover', 'group-hover'],
        //height: ['responsive', 'hover', 'group-hover'],
        //margin: ['responsive', 'hover', 'group-hover'],
        opacity: ['responsive', 'hover', 'group-hover'],
        //padding: ['responsive', 'hover', 'group-hover'],
        //position: ['responsive', 'hover', 'group-hover'],
        textColor: ['responsive', 'hover', 'group-hover'],
        textDecoration: ['responsive', 'hover', 'group-hover'],
        //width: ['responsive', 'hover', 'group-hover'],
        zIndex: ['responsive', 'hover', 'group-hover'],
        scale: ['responsive', 'hover', 'group-hover'],
        rotate: ['responsive', 'hover', 'group-hover'],
        translate: ['responsive', 'hover', 'group-hover'],
        //skew: ['responsive', 'hover', 'group-hover'],
    },
    //plugins: [],
}